<template>
  <view class="container">
    <view class="example-body" v-if="filteredRecords.length > 0">
      <uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
    </view>
    <uni-swipe-action>
      <view v-for="(item, i) in filteredRecords" :key="i" v-if="filteredRecords.length > 0">
        <uni-swipe-action-item :right-options="options" @click="deleteRecord(i)">
          <uni-collapse accordion>
            <!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
            <uni-collapse-item title-border="none" :border="false">
              <template v-slot:title>
                <uni-list>
                  <uni-list-item :title="item.date" :show-extra-icon="true" :extra-icon="extraIcon">
                  </uni-list-item>
                </uni-list>
              </template>
              <view class="record-title">
                <view class="record-title-number">序号</view>
                <view class="record-title-type">运动部位</view>
                <view class="record-title-project">运动项目</view>
                <view class="record-title-time">运动时间</view>
              </view>
              <view class="content" v-for="(item2, i2) in item.record" :key="i2">
                <view class="record-item">
                  <view class="record-number">{{item2.number}}</view>
                  <view class="record-type">{{item2.type}}</view>
                  <view class="record-project">{{item2.project}}</view>
                  <view class="record-time">{{item2.time}}</view>
                </view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </uni-swipe-action-item>
      </view>
    </uni-swipe-action>
    <view class="prompt" v-if="filteredRecords.length <= 0">你还没有运动记录哦~</view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 日期选择器默认日期范围
        range: ["", ""],
        // 日期选择器开始日期
        startDate: '',
        // 日期选择器结束日期
        endDate: '',
        // 右滑删除控件
        options: [{
          text: '删除',
          style: {
            backgroundColor: 'orangered',
          },
        }]
      };
    },
    watch: {
      range(newval) {
        console.log('范围选:', this.range);
        this.startDate = new Date(this.range[0]);
        this.endDate = new Date(this.range[1]);
        if (this.range.length === 0) {
          this.startDate = ''
          this.endDate = ''
        }
      },
    },
    computed: {
      ...mapState('m_user', ['recordList']),
      filteredRecords() {
        if (!this.startDate || !this.endDate) {
          // 如果未选择日期范围，则返回原数组
          return this.recordList;
        }
        // 如果选择了日期范围
        const startDate = new Date(this.startDate);
        const endDate = new Date(this.endDate);
        return this.recordList.filter(record => {
          const recordDate = new Date(record.date);
          return recordDate >= startDate && recordDate <= endDate;
        });
      }
    },
    methods: {
      ...mapMutations('m_user', ['updateUserRecordList']),
      // 删除一整天的运动记录
      deleteRecord(index) {
        uni.showModal({
          title: '提示',
          content: '确认删除所选运动记录吗？'
        }).then(res => {
          if (res[1].confirm) { // 用户点击确定
            this.deletRecordToServer(index)
          } else if (res[1].cancel) { // 用户点击取消
            return
          }
        });
      },
      async deletRecordToServer(index) {
        // 准备参数
        var token = uni.getStorageSync('token')
        const query = {
          token,
          recordIndex: index,
        };
        const {
          data: res
        } = await uni.$http.post('/api/delete/record', query)
        if (res.meta.status !== 200) return uni.$showMsg('删除运动记录失败')
        this.updateUserRecordList(res.message)
      }
    },
  }
</script>

<style lang="scss">
  .container {
    height: 100vh;
    position: relative;

    .record-title {
      margin: 20rpx 30rpx 10rpx 30rpx;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 0 20rpx;
      font-size: 30rpx;
      font-weight: bold;

      .record-title-number {
        width: 60rpx;
        // border: 1px solid red;
      }

      .record-title-type {
        width: 215rpx;
        // border: 1px solid red;
      }

      .record-title-project {
        flex: 1;
        padding-right: 80rpx;
        // border: 1px solid red;
      }

      .record-title-time {
        width: 150rpx;
        padding-right: 5rpx;
        // border: 1px solid red;
      }
    }

    .content {
      border: 1px solid white;

      .record-item {
        height: 90rpx;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        text-align: center;
        margin: 10rpx 30rpx;
        padding: 0 20rpx;
        background-color: whitesmoke;
        border-radius: 15rpx;
        border: 1px solid #eee;

        .record-number {
          width: 50rpx;
          // border: 1px solid red;
        }

        .record-type {
          width: 140rpx;
          text-align: right;
          // border: 1px solid red;
        }

        .record-project {
          flex: 1;
          // border: 1px solid red;
        }

        .record-time {
          width: 150rpx;
          // border: 1px solid red;
        }
      }
    }

    .content:last-child {
      padding-bottom: 30rpx;
    }

    .prompt {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #ccc;
    }
  }
</style>